import { Button, InfiniteScroll, NavBar, Switch } from 'antd-mobile';
import React, { useEffect, useState } from 'react'
import { Tabs } from 'react-vant'
import { useLocation, useNavigate } from 'react-router-dom'
import dayjs from "dayjs"
import axios from 'axios';
import LIstItem from '../../components/LIstItem';

const dates=[
  dayjs(Date.now()).set("date",new Date().getDate()-5).format("YYYY-MM-DD"),
  dayjs(Date.now()).set("date",new Date().getDate()-4).format("YYYY-MM-DD"),
  dayjs(Date.now()).set("date",new Date().getDate()-3).format("YYYY-MM-DD"),
  dayjs(Date.now()).set("date",new Date().getDate()-2).format("YYYY-MM-DD"),
  dayjs(Date.now()).set("date",new Date().getDate()-1).format("YYYY-MM-DD"),
  dayjs(Date.now()).set("date",new Date().getDate()+1).format("YYYY-MM-DD"),
  dayjs(Date.now()).set("date",new Date().getDate()+2).format("YYYY-MM-DD"),
  dayjs(Date.now()).set("date",new Date().getDate()+3).format("YYYY-MM-DD"),
  dayjs(Date.now()).set("date",new Date().getDate()+4).format("YYYY-MM-DD"),
  dayjs(Date.now()).set("date",new Date().getDate()+5).format("YYYY-MM-DD"),
]

function List() {
  const {state}=useLocation();
  const navigate=useNavigate();
  const [active,setActive]=useState(0);
  const [list,setList]=useState([]);
  const [page,setPage]=useState(1);
  const [isSeat,setisSeat]=useState(false);
  const [isSpeed,setisSpeed]=useState(false)
  const getList=async()=>{
    const res=await axios.post('/api/trip/train',{...state,page,isSeat,isSpeed})
    console.log(res.data.data)
    setList([...list,...res.data.data])
    setPage(page+1)
  }
  useEffect(()=>{
    getList()
  },[])
  return (
    <div>
      <NavBar onBack={()=>navigate(-1)}>{state.start}-{state.end}</NavBar>

      <div style={{display:"flex", width:"100vw", overflow:"hidden"}}>
        <Button active={active} onClick={()=>setActive(active-1)}>前一天</Button>
        <div style={{width:"80vw"}}>
          <Tabs>
            {
              dates.map((v,i)=>{
                return <Tabs.TabPane key={i} title={v}></Tabs.TabPane>
              })
            }
          </Tabs>
        </div>
        <Button active={active} onClick={()=>setActive(active+1)}>后一天</Button>
      </div>

      <div>
        {
          list.map((v,i)=>{
            return <LIstItem onClick={()=>navigate('/detail',{state:v})} key={i} v={v}></LIstItem>
          })
        }
      </div>

      <InfiniteScroll hasMore={true} loadMore={getList}></InfiniteScroll>
      
      <div style={{position:"fixed",bottom:"0",display:"flex", alignContent:"center", justifyContent:"space-around", width:"100%", background:"#ccc", lineHeight:"50px"}}>
        <div>
          <Switch checked={isSpeed} onChange={()=>{
            setisSpeed(!isSpeed);
            setList([]);
            setPage(1);
          }}></Switch>高铁
        </div>
        <div>
          <Switch checked={isSeat} onChange={()=>{
            setisSeat(!isSeat);
            setList([]);
            setPage(1);
          }}></Switch>有票
        </div>
      </div>
    </div>
  )
}

export default List
